import React from 'react'
import { xiangqingApi } from '../../api/index'
import { useLoaderData } from 'react-router-dom';
import style from '../xiangqing/index.module.css'
import { ResultPage, Card, Button } from "antd-mobile";
import { Collapse } from "antd-mobile";
function Index() {
    const loader=useLoaderData()
  return (
    <div>
      <ResultPage
        status="success"
        title="车次详情"
        description="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={style.pp}>
            <span>出发地:{loader.xiangqing.startStation}</span>
            <span>{loader.xiangqing.trainNo}</span>
            <span>到达地:{loader.xiangqing.endStation}</span>

            <span>{loader.xiangqing.timeTaken}</span>
            <span>耗时:{loader.xiangqing.timeTaken}</span>
            <span>{loader.xiangqing.endTime}</span>
          </div>
        </ResultPage.Card>
        <Collapse accordion>
          <Collapse.Panel
            key="1"
            title={
              <div>
                <span>硬座</span>
                <span style={{ color: "orange" }}>
                  {loader.xiangqing.ssoftSeat.price}
                </span>
                <span>
                  <Button>预约购票</Button>
                </span>
              </div>
            }
          ></Collapse.Panel>
          <Collapse.Panel
            key="2"
            title={
              <div>
                <span>硬卧</span>
                <span style={{ color: "orange" }}>
                  {loader.xiangqing.businessSeat.price}
                </span>
                <span>
                  <Button>预约购票</Button>
                </span>
              </div>
            }
          >
            手风琴模式只能同时展开一个
          </Collapse.Panel>
          <Collapse.Panel
            key="3"
            title={
              <div>
                <span>软卧</span>
                <span style={{ color: "orange" }}>
                  {loader.xiangqing.fsoftSeat.price}
                </span>
                <span>
                  <Button>预约购票</Button>
                </span>
              </div>
            }
          >
            手风琴模式只能同时展开一个
          </Collapse.Panel>
          <Collapse.Panel
            key="2"
            title={
              <div>
                <span>无座</span>
                <span style={{ color: "orange" }}>
                  {loader.xiangqing.businessSeat.price}
                </span>
                <span>
                  <Button>预约购票</Button>
                </span>
              </div>
            }
          >
            手风琴模式只能同时展开一个
          </Collapse.Panel>
        </Collapse>
      </ResultPage>
    </div>
  );
}

export default Index
export const loader = async ({ params, request }) => {
    console.log(params);
    console.log(request)
    const id = params.id
    const url=new URL(request.url)
     const data=Object.fromEntries(url.searchParams)
    console.log(data);
    const {data:res} = await xiangqingApi(id,data)
    console.log(res)
    return {xiangqing:res}
}
